<template>
	<a-popover placement="bottom" v-model:visible="visible" trigger="click">
		<template #content>
			<a-card title="" style="width: 600px; height: 500px; overflow-y: auto">
				<a-card-grid v-for="item in list" :key="item.key" @click="handleChange(item.key)" style="width: 40px; height: 40px; vertical-align: middle; text-align: center">
					<component :is="$Icons[item.key]" style="font-size: 25px" />
				</a-card-grid>
			</a-card>
		</template>
		<a class="ant-dropdown-link" style="vertical-align: middle; line-height: 30px" @click.prevent>
			<component :is="$Icons[value]" style="font-size: 20px" />
			{{ value == '' ? '选择图标' : '' }}
			<DownOutlined />
		</a>
	</a-popover>
</template>

<script>
import { ref } from 'vue';

export default {
	props: ['value'],
	setup(props, { emit }) {
		function handleChange(_value) {
			emit('update:value', _value); 
			visible.value = false;
		}
		const visible = ref(false);
		return {
			handleChange,
			visible,
		};
	},
	data() {
		return {
			list: [],
		};
	},
	mounted() {
		this.list = [];
		for (var key in this.$Icons) {
			if (key != 'createFromIconfontCN' && key != 'default' && key != 'getTwoToneColor' && key != 'setTwoToneColor') {
				if (key.indexOf('Outlined') > -1) {
					this.list.push({ key: key, value: key });
				}
			}
		}
	},
	methods: {},
};
</script>
<style scoped>
.ant-card-grid {
	padding: 8px 0 0 0;
}
.ant-down {
	margin-left: 10;
}
</style>
